//引入vue
import Vue from 'vue';
//引入vue-index
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//引用Home页面
import Home from '@/views/Home'

//引入imageUpload页面
import Detect from "@/views/Detect";
//引入history页面
import History from "@/views/History";
//引入manage页面
import Zone from "@/views/Zone";
//引入zoneInfo页面
import zoneInfo from "@/views/ZoneInfo";
import Login from "@/views/Login";
import Fruit from "@/views/Fruit";

//定义routes路由的集合，数组类型
const routes = [
    {
        path:'/',
        name:'Main',
        redirect: "/home",
        component:()=> import('../views/Main'),
        children:[
            { path: '/home', name:'Home', component: Home},
            { path: '/detect',name:'Detect' , component: Detect},
            { path: '/history', name:'History' ,component: History},
            { path: '/zone', name:'Zone' ,component: Zone},
            { path: '/fruit',name:'Fruit', component: Fruit},
            { path: '/zoneInfo/:id', component: zoneInfo}
        ]
    },
    {
        path: '/login',
        name:'Login',
        component: Login
    },
]

const router = new VueRouter({
    mode:'history',
    routes
})
//NProgress进度条配置
NProgress.configure({
    easing: 'ease',  // 动画方式
    speed: 500,  // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3 // 初始化时的最小百分比
})


// router守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
    // 每次切换页面时，调用NProgress进度条
    NProgress.start();
    if (to.path === '/login') {
        next();
    } else {
        const token = localStorage.getItem('token');
        if (token === null || token === '') {
            next('/login');
        } else {
            next();
        }
    }
})


//当路由进入后：关闭进度条
router.afterEach(() => {
    // 在即将进入新的页面组件前，关闭掉进度条
    NProgress.done()
})


export default router
